<template>
  <div style="position:relative;background:#F0F9FF;min-height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
    <div class="user_wrapper">
      <div class="u0 clearfix">
        <div class="u1">
          <img src="../../assets/images/user/user_left.png"
               alt="" />
        </div>
        <Form :model="formValidate"
              ref="formValidate"
              class="u2">
          <router-link to="/login">
            <Icon type="ios-arrow-back"
                  size="22"
                  color="#999"
                  class="go_back" />
          </router-link>
          <div style="padding: 35px 0 25px 0;">
            <p class="user_title"><span>修改密码</span></p>
          </div>
          <div style="width: 70%;margin: 0 auto;">
            <FormItem prop="phone">
              <Input v-model="formValidate.phone"
                     placeholder="手机号码"
                     class="pass" />
            </FormItem>
            <FormItem prop="code">
              <Input v-model="formValidate.code"
                     placeholder="短信验证码"
                     style="width: 72%;"
                     class="pass" />
              <Button v-show="show"
                      @click="sendCode"
                      style="width: 28%;height: 38px;margin-top: 1px;"
                      type="primary">发送验证码</Button>
              <Button v-show="!show"
                      style="width: 28%;height: 38px;background: #dcdee2;color: #fff;"
                      disabled>{{count}} s</Button>
            </FormItem>
            <FormItem prop="phone">
              <Input type="password"
                     v-model="formValidate.password"
                     placeholder="设置新密码"
                     class="pass" />
            </FormItem>
            <FormItem prop="phone">
              <Input type="password"
                     v-model="formValidate.con_password"
                     placeholder="确认新密码"
                     class="pass" />
            </FormItem>
            <FormItem>
              <Button type="primary"
                      style="width: 100%;height: 38px;"
                      @click.stop="handleSubmit()">立即修改</Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
    <div class="pub_footer"
         style="background:#F0F9FF;margin-top:50px;margin-bottom: 50px;" v-if='0'>
      <p>咬金云招 直播招商·多快好省</p>
      <p>版权所有：Copyright 常州商机旺旺汇网络科技有限公司 All Rights Reserved. 苏ICP备19035141号-5</p>
    </div>
  </div>
</template>

<script>
import { sendCode, checkCode, changePassword } from '@/api/main'
export default {
  name: "change_password",
  data () {
    return {
      count: '',
      show: true,
      timer: null,
      formValidate: {
        phone: '',
        code: '',
        password: '',
        con_password: '',
      },
      saving: false,
    }
  },
  methods: {
    getCode () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    sendCode () {
      let _this = this
      if (_this.formValidate.phone == '') {
        this.$Message.error("请输入手机号"); return;
      }
      if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,3,6,7,8])|(19[7,9]))\d{8}$/.test(_this.formValidate.phone)) {
        this.$Message.error("手机号格式错误"); return;
      }
      let obj = {}
      obj.phone = _this.formValidate.phone
      obj.from = 2;
      sendCode(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success("发送成功");
          this.getCode();
        } else {
          this.$Message.error(res.text);
        }
      })
    },
    handleSubmit () {
      let _this = this
      if (_this.formValidate.phone == '') {
        this.$Message.error("请输入手机号码"); return;
      }
      if (_this.formValidate.code == '') {
        this.$Message.error("请输入短信验证码"); return;
      }
      if (_this.formValidate.password == '') {
        this.$Message.error("请输入新密码"); return;
      }
      if (_this.formValidate.con_password == '') {
        this.$Message.error("请确认新密码"); return;
      }
      if (_this.formValidate.password != _this.formValidate.con_password) {
        this.$Message.error("两次输入的密码不一致"); return;
      }
      changePassword(_this.formValidate).then(res => {
        if (res.code == 0) {
          _this.$Message.success("设置成功，请重新登录");
          setTimeout(function () {
            _this.$router.replace({ name: 'login' })
          }, 1500);
        } else {
          _this.$Message.error(res.text);
        }
      })
    },
  }
}
</script>
